<template>
  <div class="shoppers_list">
    <div class="no-record" v-if="!cashList.length">
      暂无相关数据
    </div>
    <ul>
      <li v-for="item in cashList">
        <p class="get_time">{{item.createTime}}</p>
        <p class="get_work">
          <span class="get_monery">+{{(item.withDrawAmount/100).toFixed(2)}}</span>
          <span class="status" :class="{'yellow':item.status==1,'green':item.status==3}">{{item.statusTxt}}</span>
        </p>
      </li>
    </ul>
  </div>
</template>
<script>
import { getShopCashHistory } from '../service/index';

export default {
  data() {
    return {
      cashList: [],
    };
  },
  methods: {
    loadCashList() {
      let param = { pageSize: 20, currentPage: 1 };
      getShopCashHistory(param)
        .then(res => {
          this.cashList = res.data || [];
        });
    },
  },
  mounted() {
    this.loadCashList();
  },
};
</script>
<style lang="less">
@import (reference) "../style/less/app.less";
.shoppers_list {
  width: 100%;
  margin-bottom: 3rem;
  font-size: 14px;
  .no-record {
    text-align: center;
    padding: .8rem;
  }
  li {
    margin: 0 16px;
    padding: .5rem 0;
    border-bottom: 1px solid #d1d1d1;
    .get_time {
      padding: 6px 20px 14px;
      line-height: 1;
      background: url('../../static/img/time.png') no-repeat left 6px;
      background-size: 14px;
    }
    .get_work {
      line-height: 100%;
      .get_monery {
        font-size: 20px;
        color: #fc0;
      }
      .status {
        float: right;
      }
      .yellow {
        color: #fc0,
      }
      .green {
        color: #29B171,
      }
    }
  }
}
</style>
